<template>
  <view class="page-wrapper">
    <view class="item" v-for="(item,index) in list" :key="item.title">
      <view class="top">
        <view class="title">{{item.title}}</view>
        <view class="setting" @click="goSetting(item,index)">去设置<uni-icons type="right" class="u-setting"></uni-icons></view>
      </view>
      <view class="bottom">
        <view class="check">查看详细</view>
        <view class="rule" @click="checkRule(item)">{{item.ruleName}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
            title: '允许卡友之家查看电话信息',
            ruleName: '《电话权限使用规则》',
            url: 'https://passenger-car-uat-1301027390.cos.ap-beijing.myqcloud.com/file/statement/index.html#/pages/index/privacy'
          },
          {
            title: '允许卡友之家访问位置信息',
            ruleName: '《位置信息使用规则》',
            url: 'https://passenger-car-uat-1301027390.cos.ap-beijing.myqcloud.com/file/statement/index.html#/pages/index/privacy'
          },
          {
            title: '允许卡友之家使用相机功能',
            ruleName: '《相机权限使用规则》',
            url: 'https://passenger-car-uat-1301027390.cos.ap-beijing.myqcloud.com/file/statement/index.html#/pages/index/privacy'
          },
          {
            title: '允许卡友之家使用文件存储和访问功能',
            ruleName: '《文件存储和访问权限规则》',
            url: 'https://passenger-car-uat-1301027390.cos.ap-beijing.myqcloud.com/file/statement/index.html#/pages/index/privacy'
          },
        ]
      }
    },
    methods: {
      goSetting(item,index) {
        switch (index) {
          case 0:
            console.log(item.title)
            break;
          case 1:
            console.log(item.title)
            break;
          case 2:
            console.log(item.title)
            break;
          case 3:
            console.log(item.title)
            break;
          default:
            break;
        }
      },
      checkRule(item) {
        uni.navigateTo({
          url: '/pages/webview/webview?url=' + item.url
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .item {
    height: 144rpx;
    background: #FFFFFF;
    margin-bottom: 20rpx;
    padding-left: 32rpx;
    padding-right: 48rpx;


    .top {
      padding-top: 32rpx;
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }

      .setting {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);

        .u-setting {
          margin-left: 16rpx;
        }
      }
    }

    .bottom {
      margin-top: 18rpx;
      display: flex;

      .check {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
      }

      .rule {
        margin-left: 8rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #CF1A1B;
      }
    }
  }
</style>